<template>
  <div class="search-collect">
    <div
      id="scroll-wrap"
      ref="collectRef"
      style="overflow-y: auto; overflow-x: hidden"
      :style="{ height: `calc(100vh - ${collectTop}px - 82px)` }"
    >
      <div class="search-wrap">
        <SearchForm :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
      </div>
      <el-tabs
        v-model="searchParams.dealStatus"
        v-stick="{
          calcDomClass: '.el-tabs',
          stickDomClass: '.el-tabs__header',
          fixedName: 'fixedElTable',
          offset: 180
        }"
        @tab-change="tabCahnge"
      >
        <el-tab-pane :label="'未反馈（' + (searchParams.dealStatus == 0 ? total : count.uncompletedTotal) + '）'" :name="0">
        </el-tab-pane>
        <el-tab-pane :label="'已反馈（' + (searchParams.dealStatus == 1 ? total : count.completedTotal) + '）'" :name="1">
        </el-tab-pane>
        <el-tab-pane :label="'忽略（' + (searchParams.dealStatus == 2 ? total : count.ignoreTotal) + '）'" :name="2">
        </el-tab-pane>
        <el-tab-pane disabled>
          <template v-slot:label>
            <slot>
              <el-button :icon="Upload" type="primary" link @click="handleExport">导出报表</el-button>
            </slot>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="list-wrap">
        <div class="list-item mb20" v-for="item in data" :key="item.feedbackId">
          <header>
            <div class="photo"><img :src="item.avatar" alt="" /></div>
            <div class="user-info">
              <div class="mb14">
                <span>{{ item.createBy }}</span>
                <div v-if="searchParams.dealStatus != 2">
                  <el-button
                    :type="searchParams.dealStatus == 0 ? 'primary' : 'info'"
                    size="small"
                    style="width: 80px"
                    v-if="searchParams.dealStatus == 0 || searchParams.dealStatus == 1"
                    :disabled="searchParams.dealStatus == 1"
                    @click="settle(item.feedbackId)"
                    >{{ searchParams.dealStatus == 0 ? "解决" : "已解决" }}</el-button
                  >
                  <el-button
                    type="info"
                    plain
                    size="small"
                    style="width: 80px"
                    v-if="searchParams.dealStatus == 0"
                    @click="setIgnore(item.feedbackId)"
                    >忽略</el-button
                  >
                </div>
              </div>
              <el-row>
                <el-col :span="8">
                  <p>
                    账户：<span>{{ item.account }}</span>
                  </p>
                </el-col>
                <el-col :span="8">
                  <p>
                    采集编号：<span>{{ item.orderNo }}</span>
                  </p>
                </el-col>
                <el-col :span="8">
                  <p>
                    采集时间：<span>{{ item.createTime }}</span>
                  </p>
                </el-col>
              </el-row>
            </div>
          </header>
          <div class="content">
            <p>
              <span>搜索为空的关键词：</span>
              <b>{{ item.searchWord }}</b>
            </p>
            <p>
              <span>商品采购需求描：</span>
              <b>
                {{ item.searchRemark }}
              </b>
            </p>
            <div>
              <span>附件：</span>
              <div>
                <FileList :file-list="item.fileList" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="changePage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import SearchForm from "@/components/SearchForm";
import { Upload } from "@element-plus/icons-vue";
import { getList, editStatus, ignore } from "@/api/mall/search";
import FileList from "./FileList.vue";
import { ElMessage } from "element-plus";

const emit = defineEmits(["getCount"]);
const props = defineProps({
  count: {
    type: Object
  }
});
const formList = ref([
  {
    label: "采集编号",
    model: "orderNo",
    type: "input",
    labelWidth: "90"
  },
  {
    label: "关键词搜索",
    model: "searchWord",
    type: "input",
    labelWidth: "90"
  },
  {
    label: "会员账号",
    model: "account",
    type: "input",
    labelWidth: "90"
  },
  {
    label: "采集时间",
    model: "time",
    type: "daterange",
    format: "YYYY-MM-DD",
    labelWidth: "90"
  },
  {
    label: "内容搜索",
    model: "content",
    type: "input",
    labelWidth: "90"
  }
]);

const searchParams = ref({
  dealStatus: 0
});
const collectRef = ref();
const collectTop = ref();
const data = ref([]);
const total = ref(0);
/**
 * 初始化
 */
const init = async () => {
  const param = JSON.parse(JSON.stringify(searchParams.value));
  if (param.dealStatus == 2) {
    delete param.dealStatus;
    param.adoptStatus = 1;
  }
  const res = await getList(pagination.value, param);
  data.value = res.data.list;
  total.value = res.data.total;
};
/**
 * 点击搜索按钮的回调
 */
const search = form => {
  const startTime = form.time ? form.time[0] : undefined;
  const endTime = form.time ? form.time[1] : undefined;
  searchParams.value = { ...searchParams.value, ...form, startTime, endTime };
  delete searchParams.value.time;
  init();
};

/**
 * 点击重置按钮的回调
 */
const reset = () => {
  searchParams.value = { dealStatus: searchParams.value.dealStatus };
  init();
};
/**
 * 切换tab
 */
const tabCahnge = () => {
  total.value =
    searchParams.value.dealStatus == 0
      ? props.count.uncompletedTotal
      : searchParams.value.dealStatus == 1
        ? props.count.completedTotal
        : props.count.ignoreTotal;
  init();
};
const changePage = () => {
  init();
};
const pagination = ref({
  current: 1,
  size: 10
});
const handleExport = () => {
  // 导出报表
};
/**
 * 解决
 */
const settle = async id => {
  await editStatus(id, 1);
  ElMessage.success("操作成功");
  init();
  emit("getCount", 1);
};
/**
 * 忽略
 */
const setIgnore = async id => {
  await ignore(id);
  ElMessage.success("操作成功");
  init();
  emit("getCount", 1);
};
onMounted(() => {
  setTimeout(() => {
    collectTop.value = collectRef.value.getBoundingClientRect().top;
  }, 0);
  init();
});
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

:deep(.el-tabs__item.is-top) {
  &:last-of-type {
    float: right;
    margin-right: 20px;
  }
}

:deep(.el-tabs__nav) {
  width: 100%;
}

.search-collect {
  position: relative;

  :deep(.el-tabs__header) {
    background-color: white;
  }

  .search-wrap {
    padding: 20px;
    background-color: #f6f8fa;

    :deep(.el-form-item) {
      margin-bottom: 20px;
    }
  }

  .list-wrap {
    .list-item {
      border: 1px solid #c2d4e8;

      header {
        display: flex;
        padding: 20px;
        border-bottom: 1px solid #c2d4e8;
      }

      .photo {
        margin-right: 10px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 10px;
          vertical-align: bottom;
        }
      }

      .user-info {
        flex: 1;

        & > div {
          display: flex;
          justify-content: space-between;
          color: #1a1a1a;
        }

        .el-row {
          font-size: 14px;

          .el-col {
            p {
              color: #86909c;

              span {
                color: #3d3d3d;
              }
            }
          }
        }
      }

      .content {
        padding: 20px;
        font-size: 14px;

        p,
        & > div {
          display: flex;
          margin-bottom: 16px;

          :deep(.el-image) {
            width: 64px !important;
            height: 64px !important;
            margin-right: 10px;
            vertical-align: bottom;
          }

          span {
            display: inline-block;
            width: 140px;
            text-align: right;
            color: #86909c;
            margin-right: 10px;
          }

          b {
            font-weight: normal;
            color: #3d3d3d;
            flex: 1;
          }
        }

        & > div {
          margin-bottom: 0;

          & > div {
            flex: 1;
          }
        }
      }
    }
  }
}
</style>
